<script setup lang="ts">
import { addBed, addBuild, addFloor, addRoom, saveBed, saveBuild, saveFloor, saveRoom } from '@/api';
// import clsx from 'clsx';
import { ADD_TYPE_ENUM, ADD_TYPE_MAP } from '@/const';
import type { Current } from '@/types';
import { Form, message } from 'ant-design-vue';
import { isEmpty } from 'radash';
import { reactive, ref, toRefs } from 'vue';

const props = defineProps<{
	class?: string;
	type: ADD_TYPE_ENUM
	current?: Current
	data?: {
		id: number,
		name: string
	}
}>();

const { type, current } = toRefs(props);


const title = ref(ADD_TYPE_MAP[type.value]);

const emit = defineEmits(['add'])
const open = ref(false);
const placeholder = `请输入${title.value}名称`;
const useForm = Form.useForm;
const rules = reactive({
	name: [{ required: true, message: placeholder }]
});
const formState = reactive<{
	name: string;
}>({
	name: ''
});
const { validate, resetFields, validateInfos } = useForm(formState, rules);

const add = async () => {
	if (!current.value) return;
	const { building, floor, room } = toRefs(current.value);
	try {
		if (type.value === ADD_TYPE_ENUM.building) {
			await addBuild(formState);
		}
		if (type.value === ADD_TYPE_ENUM.floor) {
			await addFloor({
				...formState,
				apartmentID: building?.value || 0
			});
		}
		if (type.value === ADD_TYPE_ENUM.room) {
			await addRoom({
				...formState,
				apartmentID: building?.value || 0,
				floorID: floor?.value || 0
			});
		}
		if (type.value === ADD_TYPE_ENUM.bed) {
			await addBed({
				...formState,
				apartmentID: building?.value || 0,
				floorID: floor?.value || 0,
				roomID: room?.value || 0
			});
		}
		open.value = false;
		emit('add', formState);
		message.success('添加成功');
	} catch (err) {
		console.log(err);
	}
}

const save = async () => {
	const id = props.data?.id;
	if (isEmpty(id)) return;
	try {
		if (type.value === ADD_TYPE_ENUM.building) {
			await saveBuild({
				...formState,
				apartmentID: id || 0
			});
		}
		if (type.value === ADD_TYPE_ENUM.floor) {
			await saveFloor({
				...formState,
				floorID: id || 0
			});
		}
		if (type.value === ADD_TYPE_ENUM.room) {
			await saveRoom({
				...formState,
				roomID: id || 0
			});
		}
		if (type.value === ADD_TYPE_ENUM.bed) {
			await saveBed({
				...formState,
				bedID: id || 0,
			});
		}
		open.value = false;
		emit('add', formState);
		message.success('保存成功');
	} catch (err) {
		console.log(err);
	}
}

const onOk = () => {
	validate().then(() => {
		props.data?.id ? save() : add();
	});
};

const onAdd = () => {
	resetFields({
		name: props.data?.id ? props.data?.name : ''
	});
	open.value = true;
};

</script>

<template>
	<span :class="props.class">
		<span @click="onAdd">
			<slot>
				<a-button type="primary">添加{{ title }}</a-button>
			</slot>
		</span>
		<a-modal :open :title="`添加${title}`" @cancel="open = false" @ok="onOk">
			<a-form>
				<a-form-item :label="`${title}名称`" v-bind="validateInfos.name">
					<a-input v-model:value="formState.name" :placeholder="placeholder" />
				</a-form-item>
			</a-form>
		</a-modal>
	</span>
</template>
<style scoped></style>
